import React from 'react'
import { get } from '@/utils/request'

import '@/mock'

type Props = {}

const InfiniteList: React.FC<Props> = props => {
  const [pageNo, setPageNo] = React.useState(1)
  const [list, setList] = React.useState<any[]>([])

  const btmNode = React.useRef<HTMLDivElement>(null)
  const topNode = React.useRef<HTMLDivElement>(null)
  const pageNoRef = React.useRef<HTMLInputElement>(null)

  // 获取数据
  React.useEffect(() => {
    get('/api/mock', { pageNo }).then((res: any) => {
      setList(list.concat(res.data.data))
    })
  }, [pageNo])

  React.useEffect(() => {
    // 去创建一个交叉观察者对象
    // 创建交叉观察者对象时，需要传入一个回调函数，当交叉事件发生时，这个回调函数会执行
    // 函数被执行时，会将所有的被监听观察者以数组的方式传入到这个函数中
    var intersectionObserver = new IntersectionObserver(entries => {
      // 如果元素将要进入可视区域
      for (const entrie of entries) {
        if (entrie.isIntersecting) {
          if (entrie.target.className === 'top') {
            console.log('顶部将要进入')
            return
          }

          if (entrie.target.className === 'btm' && pageNoRef.current) {
            console.log('底部将要进入', pageNoRef.current.value)
            // 为了避免闭包问题，这里去真实dom中获取
            setPageNo(parseInt(pageNoRef.current.value, 10) + 1)
            return
          }
        }
      }
    })
    // 去观察指定的 dom 节点
    btmNode.current && intersectionObserver.observe(btmNode.current)
    topNode.current && intersectionObserver.observe(topNode.current)
  }, [])

  return (
    <div className="docwrap infinite">
      <div
        className="top"
        ref={topNode}
        style={{ width: '100%', height: '200px', background: '#f60' }}
      ></div>
      {list.map(item => (
        <div key={item.key}>
          <img src={item.image} alt=""></img>
        </div>
      ))}
      <div
        className="btm"
        ref={btmNode}
        style={{ width: '100%', height: '200px', background: '#f60' }}
      ></div>
      <input ref={pageNoRef} type="hidden" value={pageNo} />
    </div>
  )
}
export default InfiniteList
